<script setup lang="ts">
defineOptions({
  name: ""
});
</script>

<template>
  <div class="customer-box">
    <div class="app-head-main-title">
      <h2 class="h1-tit">行业客户</h2>
      <h4 />
      携手共筑安全网络新生态
    </div>
    <div class="case-list aos-init aos-animate" data-aos="fade-up">
      <a href="/zhjt" class="item">
        <img
          src="./asset/grey1980797d5a7486a144cd8fafabccd47b1b1_360_166.jpeg"
          alt="中信集团"
          class="bg01"
        />
        <!-- <img src="" alt="中信集团" class="bg02"> -->
        <!-- <div class="bg"></div> -->
      </a>
      <a href="/tjg" class="item">
        <img
          src="./asset/grey152a7f5f4f99a131426b94605f51252eb8e_360_166.jpeg"
          alt="天津港"
          class="bg01"
        />
        <!-- <img src="" alt="天津港" class="bg02"> -->
        <!-- <div class="bg"></div> -->
      </a>
      <a href="/shcjdx" class="item">
        <img
          src="./asset/grey136b812d9706ada94fc1efc6674839f06a_360_166.jpeg"
          alt="上海财经大学"
          class="bg01"
        />
        <!-- <img src="" alt="上海财经大学" class="bg02"> -->
        <!-- <div class="bg"></div> -->
      </a>
      <a href="/xadzkjdx" class="item">
        <img
          src="./asset/grey1595f89d22f316ee689f2e2b8b8a220d763_360_166.jpeg"
          alt="西安电子科技大学"
          class="bg01"
        />
        <!-- <img src="" alt="西安电子科技大学" class="bg02"> -->
        <!-- <div class="bg"></div> -->
      </a>
      <a href="javascript:;" class="item">
        <img
          src="./asset/grey16680b2f6cd644b2ae0ddba6150bbcbda7e_360_166.jpeg"
          alt="国家电网"
          class="bg01"
        />
      </a>
      <a href="javascript:;" class="item">
        <img
          src="./asset/grey15be8601aac8000e16a65b075689c8c84b_360_166.jpeg"
          alt="天津大学"
          class="bg01"
        />
      </a>
      <a href="javascript:;" class="item">
        <img
          src="./asset/grey16680b2f6cd644b2ae0ddba6150bbcbda7e_360_166.jpeg"
          alt="国家电网"
          class="bg01"
        />
      </a>
      <a href="javascript:;" class="item">
        <img
          src="./asset/grey15be8601aac8000e16a65b075689c8c84b_360_166.jpeg"
          alt="天津大学"
          class="bg01"
        />
      </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.customer-box {
  box-shadow: 0 -10px 20px rgba(18, 7, 7, 0.06),
    0 10px 20px rgba(18, 7, 7, 0.06);
  padding-bottom: 50px;
}
.app-head-main-title {
  color: #333;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  padding: 50px 0;
  text-align: center;
  h2 {
    margin-bottom: 20px;
    color: #6ec1e4;
  }
}
.case-list {
  display: flex;
  flex-wrap: wrap;
  background-color: #f8f8f8;
  border: 1px solid #e6e6e6;
  border-bottom: none;
  width: 1440px;
  margin: 0 auto;
  .item {
    width: calc((100% - 160px) / 4);
    cursor: pointer;
    position: relative;
    height: 7.5vw;
    margin: 20px;
    img {
      transition: all 0.2s;
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      border-right: solid 1px #e6e6e6;
      border-bottom: solid 1px #e6e6e6;
      background: #fafafa;
    }
  }

  .item:hover img {
    box-shadow: 0 0 5px rgb(50 50 50 / 10%);
    transform: scale(1.1);
    background: white;
    z-index: 2;
    filter: brightness(1.05);
  }
}
</style>
